<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>硅基 KEY 池 - 管理</title>
    <link rel="icon" type="image/x-icon" href="/static/logo.png">
    <!-- 预加载字体 -->
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <style type="text/css">
        /* 使用系统字体回退，减少外部字体依赖 */
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }
        /* 只保留必要的字体，设置font-display为swap确保文本可见 */
        @font-face {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            src: local('Inter Regular'), local('Inter-Regular'), 
                 url(/cf-fonts/v/inter/5.0.16/latin/wght/normal.woff2) format('woff2');
            font-display: swap;
        }
        @font-face {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 600;
            src: local('Inter SemiBold'), local('Inter-SemiBold'), 
                 url(/cf-fonts/v/inter/5.0.16/latin/wght/normal.woff2) format('woff2');
            font-display: swap;
        }
    </style>
    <style>
        :root {
            --primary: #6B46C1;
            --primary-hover: #553C9A;
            --secondary: #64748B;
            --success: #10B981;
            --danger: #EF4444;
            --warning: #F59E0B;
            --bg-light: #F8FAFC;
            --bg-white: #FFFFFF;
            --text-dark: #1F2937;
            --text-muted: #64748B;
            --border: #E2E8F0;
            --shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            --card-border: #E2E8F0;
            --progress-bg: #E2E8F0;
            --status-active-bg: rgba(16, 185, 129, 0.1);
            --status-expired-bg: rgba(239, 68, 68, 0.1);
            --progress-fill-success: #10B981;
            --progress-fill-warning: #F59E0B;
            --progress-fill-danger: #EF4444;
        }

        /* Dark theme variables */
        [data-theme="dark"] {
            --primary: #8B5CF6;
            --primary-hover: #7C3AED;
            --secondary: #94A3B8;
            --success: #10B981;
            --danger: #EF4444;
            --warning: #F59E0B;
            --bg-light: #1E293B;
            --bg-white: #0F172A;
            --text-dark: #F1F5F9;
            --text-muted: #94A3B8;
            --border: #334155;
            --shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
            --card-border: #334155;
            --progress-bg: #334155;
            --status-active-bg: rgba(16, 185, 129, 0.2);
            --status-expired-bg: rgba(239, 68, 68, 0.2);
            --progress-fill-success: #10B981;
            --progress-fill-warning: #F59E0B;
            --progress-fill-danger: #EF4444;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'Inter', sans-serif; background: var(--bg-light); color: var(--text-dark); line-height: 1.6; min-height: 100vh; }
        .container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
        .card { background: var(--bg-white); border-radius: 0.75rem; box-shadow: var(--shadow); padding: 1.5rem; margin-bottom: 1.5rem; border: 1px solid var(--card-border); }
        
        /* Modern UI elements */
        .header { background: var(--bg-white); padding: 1rem 0; border-bottom: 1px solid var(--border); }
        .header-content { display: flex; justify-content: space-between; align-items: center; }
        .header-title { display: flex; align-items: center; gap: 0.75rem; }
        .logo { width: 2rem; height: 2rem; }
        .app-title { font-size: 1.25rem; font-weight: 600; color: var(--primary); }
        
        .nav-actions { display: flex; align-items: center; gap: 1rem; }
        .theme-toggle { background: transparent; border: none; cursor: pointer; color: var(--text-muted); }
        .nav-links { display: flex; gap: 0.5rem; background: var(--bg-light); padding: 0.25rem; border-radius: 0.5rem; }
        .nav-link { color: var(--text-muted); text-decoration: none; padding: 0.5rem 1rem; border-radius: 0.375rem; transition: all 0.2s; }
        .nav-link:hover, .logout-btn:hover { background: rgba(107, 70, 193, 0.1); color: var(--primary); }
        .nav-link.active { color: var(--primary); background: rgba(107, 70, 193, 0.1); font-weight: 500; }
        .logout-btn { color: var(--danger); text-decoration: none; padding: 0.5rem 1rem; border-radius: 0.375rem; transition: all 0.2s; }
        
        .main-content { padding: 2rem 0; }
        .section { margin-bottom: 2rem; }
        .section-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
        
        .card-title { font-size: 1.125rem; font-weight: 600; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
        
        .input-container { display: flex; flex-direction: column; gap: 1rem; }
        textarea { width: 100%; min-height: 120px; padding: 0.75rem; background: var(--bg-light); 
                 color: var(--text-dark); border: 1px solid var(--border); border-radius: 0.5rem; 
                 font-family: 'Inter', sans-serif; font-size: 0.875rem; resize: vertical; }
        textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(107, 70, 193, 0.1); }
        
        .button-group { display: flex; gap: 0.75rem; margin-bottom: 1.5rem; }
        button, .btn-primary, .btn-secondary, .btn-danger { 
            display: flex; align-items: center; gap: 0.5rem; font-weight: 500; padding: 0.625rem 1.25rem; 
            border-radius: 0.5rem; border: none; cursor: pointer; transition: all 0.2s;
        }
        .btn-primary { background: var(--primary); color: white; }
        .btn-primary:hover { background: var(--primary-hover); }
        .btn-secondary { background: var(--bg-white); color: var(--primary); border: 1px solid var(--border); }
        .btn-secondary:hover { border-color: var(--primary); background: rgba(107, 70, 193, 0.05); }
        .btn-danger { background: var(--bg-white); color: var(--danger); border: 1px solid var(--border); }
        .btn-danger:hover { border-color: var(--danger); background: rgba(239, 68, 68, 0.05); }
        
        /* Stats grid */
        .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
        .stat-card { background: var(--bg-white); padding: 1.25rem; border-radius: 0.75rem; box-shadow: var(--shadow); 
                    border: 1px solid var(--border); display: flex; align-items: center; gap: 1rem; }
        .stat-icon { width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; 
                    border-radius: 0.75rem; flex-shrink: 0; }
        .stat-icon-users { background: rgba(147, 51, 234, 0.15); color: #9333ea; }
        .stat-icon-active { background: rgba(22, 163, 74, 0.15); color: #16a34a; }
        .stat-icon-calls { background: rgba(234, 88, 12, 0.15); color: #ea580c; }
        .stat-icon-tokens { background: rgba(2, 132, 199, 0.15); color: #0284c7; }
        .stat-content { display: flex; flex-direction: column; }
        .stat-label { color: var(--text-muted); font-size: 0.875rem; }
        .stat-value { font-weight: 700; font-size: 1.5rem; line-height: 1.2; }
        
        /* Filter container */
        .filter-container { 
            display: flex; 
            margin-bottom: 1.5rem; 
            background: var(--bg-white); 
            padding: 1rem; 
            border-radius: 0.75rem; 
            border: 1px solid var(--border); 
            box-shadow: var(--shadow); 
        }
        
        /* Table styles */
        .table-container { overflow-x: auto; background: var(--bg-white); border-radius: 0.75rem; 
                         box-shadow: var(--shadow); border: 1px solid var(--border); margin-bottom: 1.5rem; }
        table { width: 100%; border-collapse: collapse; }
        th, td { padding: 1rem; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.875rem; }
        th { font-weight: 600; background: rgba(107, 70, 193, 0.05); position: relative; }
        tr:last-child td { border-bottom: none; }
        tr:hover td { background: rgba(107, 70, 193, 0.02); }
        
        /* Messages */
        #message { 
            padding: 1rem; 
            border-radius: 0.5rem; 
            margin-bottom: 1.5rem; 
            display: none; 
            font-size: 0.875rem;
            max-width: 100%;
            word-break: break-word;
        }
        .success { 
            background: var(--status-active-bg); 
            color: var(--success); 
            border: 1px solid rgba(16, 185, 129, 0.2); 
            display: block !important; 
        }
        .error { 
            background: var(--status-expired-bg); 
            color: var(--danger); 
            border: 1px solid rgba(239, 68, 68, 0.2); 
            display: block !important; 
        }
        
        /* Pagination */
        .pagination { display: flex; justify-content: center; gap: 0.5rem; margin: 1.5rem 0; }
        .pagination button { min-width: 5rem; }
        .pagination button:disabled { opacity: 0.5; cursor: not-allowed; }
        .pagination-info { color: var(--text-muted); margin: 0 0.5rem; }
        
        /* Responsive */
        @media (max-width: 992px) {
            .stats-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 768px) {
            .header-content { flex-direction: column; align-items: flex-start; gap: 1rem; }
            .nav-links { width: 100%; justify-content: space-around; }
            .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
            .button-group { flex-wrap: wrap; }
            .button-group button { flex: 1 1 calc(50% - 0.5rem); }
            .filter-container {
                flex-direction: column;
            }
            .filter-container > div {
                width: 100%;
                margin-bottom: 0.5rem;
            }
            .filter-container input,
            .filter-container button {
                width: 100%;
            }
        }
        @media (max-width: 576px) {
            .stats-grid { grid-template-columns: 1fr; }
            .button-group button { flex: 1 1 100%; }
        }
    </style>
</head>

<body>
    <header class="header">
        <div class="container">
            <div class="header-content">
                <div class="header-title">
                    <img src="/static/logo.png" alt="Logo" class="logo">
                    <h1 class="app-title">硅基 KEY 池</h1>
                </div>
                <div class="nav-actions">
                    <button id="themeToggle" class="theme-toggle" title="切换主题">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
                        </svg>
                    </button>
                    <div class="nav-links">
                        <a href="/admin" class="nav-link active">首页</a>
                        <a href="/keys" class="nav-link">密钥管理</a>
                        <a href="/stats" class="nav-link">使用统计</a>
                        <a href="/logout" class="logout-btn">退出</a>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <main class="main-content">
        <div class="container">
            <section class="section">
                <div class="card">
                    <h2 class="card-title">📥 导入 API 密钥</h2>
                    <div class="input-container">
                        <textarea id="keys" placeholder="每行一个 API 密钥，例如：sk-xxxxxxxxxxxxxxxxxxxxxxxx"></textarea>
                        <div class="button-group">
                            <button class="btn-primary" onclick="importKeys()">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                                    <polyline points="17 8 12 3 7 8"></polyline>
                                    <line x1="12" y1="3" x2="12" y2="15"></line>
                                </svg>
                                导入密钥
                            </button>
                            <button class="btn-secondary" onclick="refreshKeys()">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"></path>
                                </svg>
                                刷新余额
                            </button>
                            <button class="btn-secondary" onclick="exportKeys()">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                                    <polyline points="7 10 12 15 17 10"></polyline>
                                    <line x1="12" y1="15" x2="12" y2="3"></line>
                                </svg>
                                导出为 TXT
                            </button>
                        </div>
                    </div>
                </div>
            </section>

            <div id="message"></div>

            <section class="section">
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-icon stat-icon-users">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle></svg>
                        </div>
                        <div class="stat-content">
                            <div class="stat-label">总账号数</div>
                            <div class="stat-value" id="keyCount">0</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon stat-icon-active">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
                        </div>
                        <div class="stat-content">
                            <div class="stat-label">总余额</div>
                            <div class="stat-value" id="totalBalance">¥0.00</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon stat-icon-calls">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path></svg>
                        </div>
                        <div class="stat-content">
                            <div class="stat-label">总使用次数</div>
                            <div class="stat-value" id="totalCalls">0</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon stat-icon-tokens">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="15" rx="2"></rect><polyline points="17 2 12 7 7 2"></polyline></svg>
                        </div>
                        <div class="stat-content">
                            <div class="stat-label">总消耗次数</div>
                            <div class="stat-value" id="totalTokens">0</div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="section">
                <h2 class="section-title">📝 最近调用日志</h2>
                
                <!-- 模型搜索过滤器 -->
                <div class="card" style="margin-bottom: 1.5rem;">
                    <div style="display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;">
                        <label for="modelFilter" style="color: var(--text-muted); font-size: 0.875rem; white-space: nowrap; font-weight: 500; min-width: 80px;">模型搜索：</label>
                        <div style="display: flex; flex: 1; gap: 0.5rem; width: 100%; flex-wrap: wrap;">
                            <input type="text" id="modelFilter" style="padding: 0.625rem; background: var(--bg-light); color: var(--text-dark); border: 1px solid var(--border); border-radius: 0.5rem; font-size: 0.875rem; flex: 1; min-width: 200px;" placeholder="输入模型名称进行筛选" onkeyup="if(event.key === 'Enter') applyModelFilter()">
                            <button onclick="applyModelFilter()" class="btn-secondary" style="white-space: nowrap;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <circle cx="11" cy="11" r="8"></circle>
                                    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                                </svg>
                                搜索
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="table-container">
                    <table id="logsTable">
                        <thead>
                            <tr>
                                <th>密钥</th>
                                <th>模型</th>
                                <th>调用时间</th>
                                <th>输入</th>
                                <th>输出</th>
                                <th>总量</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>

                <div class="pagination" id="pagination"></div>

                <div class="button-group">
                    <button class="btn-danger" onclick="clearLogs()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M3 6h18"></path>
                            <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                            <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
                        </svg>
                        清空日志
                    </button>
                </div>
            </section>
        </div>
    </main>

    <script>
        // 主题切换功能
        document.addEventListener('DOMContentLoaded', function() {
            // 检查首选主题
            const savedTheme = localStorage.getItem('theme') || 'light';
            document.documentElement.setAttribute('data-theme', savedTheme);
            updateThemeIcon(savedTheme);
            
            // 主题切换事件
            document.getElementById('themeToggle').addEventListener('click', function() {
                const currentTheme = document.documentElement.getAttribute('data-theme');
                const newTheme = currentTheme === 'light' ? 'dark' : 'light';
                
                document.documentElement.setAttribute('data-theme', newTheme);
                localStorage.setItem('theme', newTheme);
                updateThemeIcon(newTheme);
            });
        });
        
        // 更新主题图标
        function updateThemeIcon(theme) {
            const iconContainer = document.getElementById('themeToggle');
            if (theme === 'dark') {
                iconContainer.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"></path></svg>`;
                iconContainer.title = "切换到明亮模式";
            } else {
                iconContainer.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg>`;
                iconContainer.title = "切换到黑暗模式";
            }
        }
        
        // 检测是否为移动设备
        const isMobile = window.innerWidth <= 768;

        async function showMessage(text, type = 'success', duration = 5000) {
            const messageEl = document.getElementById('message');
            messageEl.textContent = text;
            messageEl.className = type;
            messageEl.style.display = 'block';
            
            // 对于错误消息，显示更长的时间
            const displayDuration = type === 'error' ? Math.max(duration, 7000) : duration;
            
            // 如果设置了持续时间，则自动隐藏
            if (displayDuration > 0) {
                setTimeout(() => {
                    if (messageEl.textContent === text) { // 确保不会隐藏新的消息
                        messageEl.style.display = 'none';
                    }
                }, displayDuration);
            }
            
            return messageEl; // 返回元素以便可以进一步控制
        }
        
        async function fetchStats() {
            const response = await fetch("/api/stats/overview");
            const data = await response.json();
            document.getElementById("keyCount").textContent = Math.floor(data.key_count || 0);
            document.getElementById("totalBalance").textContent = `¥${parseFloat(data.total_balance || 0).toFixed(2)}`;
            document.getElementById("totalCalls").textContent = Math.floor(data.total_calls || 0);
            document.getElementById("totalTokens").textContent = Math.floor(data.total_tokens || 0);
        }
        
        async function importKeys() {
            const messageEl = document.getElementById("message");
            messageEl.textContent = "正在导入，请稍候...";
            messageEl.className = "success";
            messageEl.style.display = 'block';
            
            const keys = document.getElementById("keys").value;
            const response = await fetch("/import_keys", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ keys })
            });
            const data = await response.json();
            messageEl.textContent = data.message;
            fetchStats();
        }
        
        async function refreshKeys() {
            const messageEl = document.getElementById("message");
            messageEl.textContent = "正在刷新，请稍候...";
            messageEl.className = "success";
            messageEl.style.display = 'block';
            
            const response = await fetch("/refresh", { method: "POST" });
            const data = await response.json();
            messageEl.textContent = data.message;
            fetchStats();
        }
        
        function exportKeys() {
            window.location.href = "/export_keys";
        }
        
        // Logs fetching and pagination
        let currentPage = 1;
        let modelFilter = '';
        
        async function applyModelFilter() {
            modelFilter = document.getElementById('modelFilter').value.trim();
            currentPage = 1;
            
            // 使用新函数来显示加载消息
            const loadingMsg = await showMessage("正在筛选日志...", "success", 0); // 0表示不会自动隐藏
            
            try {
                await fetchLogs(currentPage);
                loadingMsg.style.display = 'none'; // 手动隐藏加载消息
            } catch (error) {
                showMessage("筛选日志时出错: " + error.message, "error");
            }
        }
        
        async function fetchLogs(page = 1) {
            currentPage = page;
            document.querySelector("#logsTable tbody").innerHTML = `
                <tr>
                    <td colspan="6" style="text-align: center;">加载中...</td>
                </tr>
            `;
            
            try {
                let url = `/logs?page=${page}`;
                if (modelFilter) {
                    url += `&model=${encodeURIComponent(modelFilter)}`;
                }
                
                const response = await fetch(url);
                if (!response.ok) {
                    throw new Error(`获取日志失败: ${response.status}`);
                }
                
                const data = await response.json();
                
                const tbody = document.querySelector("#logsTable tbody");
                tbody.innerHTML = "";
                
                if (data.logs.length === 0) {
                    tbody.innerHTML = `
                        <tr>
                            <td colspan="6" style="text-align: center;">暂无日志记录</td>
                        </tr>
                    `;
                    return;
                }

                // 使用DocumentFragment以减少DOM操作次数
                const fragment = document.createDocumentFragment();
                
                data.logs.forEach(log => {
                    const date = new Date(log.call_time * 1000);
                    const formattedDate = isMobile ? 
                        `${String(date.getMonth()+1).padStart(2,'0')}/${String(date.getDate()).padStart(2,'0')} ${String(date.getHours()).padStart(2,'0')}:${String(date.getMinutes()).padStart(2,'0')}` 
                        : date.toLocaleString('zh-CN');
                    
                    const tr = document.createElement("tr");
                    
                    // 使用textContent而不是innerHTML来避免XSS风险
                    const keyTd = document.createElement("td");
                    keyTd.className = "key-column";
                    keyTd.textContent = `${log.api_key.substring(0, 6)}...${log.api_key.substring(log.api_key.length - 3)}`;
                    
                    const modelTd = document.createElement("td");
                    modelTd.textContent = log.model || 'N/A';
                    
                    const timeTd = document.createElement("td");
                    timeTd.textContent = formattedDate;
                    
                    const inputTd = document.createElement("td");
                    inputTd.textContent = log.input_tokens;
                    
                    const outputTd = document.createElement("td");
                    outputTd.textContent = log.output_tokens;
                    
                    const totalTd = document.createElement("td");
                    totalTd.textContent = log.total_tokens;
                    
                    tr.appendChild(keyTd);
                    tr.appendChild(modelTd);
                    tr.appendChild(timeTd);
                    tr.appendChild(inputTd);
                    tr.appendChild(outputTd);
                    tr.appendChild(totalTd);
                    
                    fragment.appendChild(tr);
                });
                
                tbody.appendChild(fragment);
                
                // 更新分页按钮
                const paginationDiv = document.getElementById("pagination");
                paginationDiv.innerHTML = "";
                const totalPages = Math.ceil(data.total / data.page_size);
                
                if (totalPages > 1) {
                    // 添加页码信息
                    const pageInfo = document.createElement("div");
                    pageInfo.className = "pagination-info";
                    pageInfo.textContent = `第 ${data.page} 页，共 ${totalPages} 页`;
                    paginationDiv.appendChild(pageInfo);
                    
                    // 使用上一页/下一页按钮
                    const prevBtn = document.createElement("button");
                    prevBtn.innerHTML = "&#10094; 上一页";
                    prevBtn.className = "btn-secondary";
                    prevBtn.disabled = data.page === 1;
                    prevBtn.onclick = () => fetchLogs(data.page - 1);
                    paginationDiv.appendChild(prevBtn);
                    
                    // 下一页按钮
                    const nextBtn = document.createElement("button");
                    nextBtn.innerHTML = "下一页 &#10095;";
                    nextBtn.className = "btn-secondary";
                    nextBtn.disabled = data.page === totalPages;
                    nextBtn.onclick = () => fetchLogs(data.page + 1);
                    paginationDiv.appendChild(nextBtn);
                }
            } catch (error) {
                console.error("Error fetching logs:", error);
                document.querySelector("#logsTable tbody").innerHTML = `
                    <tr>
                        <td colspan="6" style="text-align: center;">加载日志失败: ${error.message}</td>
                    </tr>
                `;
            }
        }
        
        async function clearLogs() {
            if (!confirm("确定要清空所有日志吗？此操作无法撤销。")) return;
            const response = await fetch("/clear_logs", { method: "POST" });
            const data = await response.json();
            showMessage(data.message);
            fetchLogs(1);
            fetchStats();
        }
        
        // 监听窗口大小变化
        window.addEventListener('resize', function() {
            const newIsMobile = window.innerWidth <= 768;
            if (newIsMobile !== isMobile) {
                // 重新加载页面以应用移动端优化
                location.reload();
            }
        });
        
        // Update stats and logs on page load
        fetchStats();
        fetchLogs();
    </script>
</body>

</html>